<template>
  <div>
    <van-row>
      <van-col span="24"
               style="height:50px">

      </van-col>
    </van-row>
    <van-cell title="签到功能展示"
              :value="date"
              @click="signshow = true" />
    <van-calendar v-model="signshow"
                  @confirm="onConfirm" />

    <van-cell title="可领取优惠券"
              @click="willTake()" />
    <van-action-sheet v-model="canTakeState"
                      title="可领取优惠券">
      <div class="content">

        <van-card v-for="(item,index) in coupons"
                  :key="index"
                  :price="item.amount.toFixed(2)"
                  :desc="item.couponTypeLabel"
                  :title="item.couponName"
                  :thumb="item.couponImg"
                  @click-thumb="takeCoupon(item)">
          <template #tags>
            <van-tag plain
                     type="danger">满{{item.minPoint.toFixed(2)}}元</van-tag>
            <van-tag plain
                     type="danger">减{{item.amount.toFixed(2)}}元</van-tag>
          </template>

        </van-card>
      </div>
    </van-action-sheet>

    <van-tabbar route>
      <van-tabbar-item replace
                       to="/home"
                       icon="home-o">主页</van-tabbar-item>
      <van-tabbar-item replace
                       to="/activity"
                       icon="gem-o">活动</van-tabbar-item>

      <van-tabbar-item replace
                       to="/cart"
                       icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace
                       to="/me"
                       icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { signIn, canTake,take} from '@/api/couponService'
//canTake, take
import { Toast } from 'vant';
export default {
  components: {},
  props: {},
  data () {
    return {
      signshow: false,
      canTakeState: false,
      coupons: [],
      date: ''

    }
  },

  computed: {},
  watch: {},
  methods: {
    onClickLeft () {
      this.$router.push({
        path: '/activity'
      })
    },
    onConfirm (date) {

      console.log(date)
      signIn().then(res => {
        if (res.data.code === 100200)
        {
          Toast(res.data.message)
          this.signshow = false;
        } else
        {
          Toast(res.data.message)
          this.signshow = false;
        }
      })
    },
    takeCoupon (item) {
      take({couponId:item.id}).then(res=>{
    
          Toast(res.data.message)
        
      })
      console.log(item)
    }, willTake () {
      canTake().then(res=>{
        this.coupons = res.data.data
      })
      this.canTakeState = true
    }
  },
  created () { },
  mounted () { },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { }
}
</script>
<style lang='less'>
.content {
  padding: 16px 16px 160px;
}
</style>